import styled from 'styled-components';
const DeleteIconButtonStyled = styled.div`
    /* From Uiverse.io by boryanakrasteva */
    .btn {
      background-color: transparent;
      position: relative;
      border: none;
    }

    // .btn::after {
    //   content: 'delete';
    //   position: absolute;
    //   top: -130%;
    //   left: 50%;
    //   transform: translateX(-50%);
    //   width: fit-content;
    //   height: fit-content;
    //   background-color: rgb(168, 7, 7);
    //   padding: 4px 8px;
    //   border-radius: 5px;
    //   transition: 0.2s linear;
    //   transition-delay: 0.2s;
    //   color: white;
    //   text-transform: uppercase;
    //   font-size: 12px;
    //   opacity: 0;
    //   visibility: hidden;
    // }

    .icon {
      transform: scale(1.2);
      transition: 0.2s linear;
    }

    .btn:hover > .icon {
      transform: scale(1.5);
    }

    .btn:hover > .icon path {
      fill: rgb(168, 7, 7);
    }

    .btn:hover::after {
      visibility: visible;
      opacity: 1;
      top: -160%;
    }

    .btn:active > .icon {
      transform: scale(1);
    }
  `;
export { DeleteIconButtonStyled };